<template>
    <ve-ring
            :data="chartData"
            :judge-width="true"
            :settings='chartSettings'
            height="calc(100% - 4px)"
            :legend="legend"
    ></ve-ring>
</template>

<script>
    import api from '../../api'
    export default {
        name: "ivrsource",
        data () {
            this.chartSettings = {
                radius: ['45%','55%'],
                offsetY:'48%',
                label:{
                    formatter:'{c} / {d}%',
                    fontSize:16
                }

            }
            return {
                chartData: {
                    /*columns: ['客户类型', '数量'],
                    rows: [
                        { '客户类型': '普通客户', '数量': 1393 },
                        { '客户类型': '大客户', '数量': 3530 },
                        { '客户类型': '实施', '数量': 2923 },
                        { '客户类型': 'VIP客户', '数量': 1723 },
                        { '客户类型': '服务', '数量': 3792 },
                        { '客户类型': '代理', '数量': 4593 }
                    ]*/
                    columns:['CHNL_BIZ_NAME','ACCS_CNT'],
                    rows: []
                },

                legend: {
                    y: 'bottom',
                    textStyle:{
                        fontSize:16,
                        color:'#fff'
                    },
                    itemWidth :14
                }
            }
        },
        created(){
          this.refresh()
        },
        methods:{
            async refresh(){
                this.chartData = await api.getIvrsource();
            }
        }
    }
</script>

<style scoped>

</style>
